Hbuilder |
您所在的位置：网站首页 › h5 扫二维码 › Hbuilder |
|
使用cordova可以实现扫描二维码或者条形码的功能，但是环境配置比较复杂，需要额外安装插件。 采用html5+同样也可以实现二维码扫描功能，配合Hbuilder打包（必须），方便快捷，并且还可以修改扫描框的样式，更强的灵活度。实现方法如下： 新建2个html页面，一个作为页面的展示，一个用作扫描二维码界面 作为页面展示的index.html页面 Hello H5+ function scaned(t, r, f) { var inputContent = document.getElementById("input"); inputContent.value = r; } .hdata { color: #e1673e; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 扫一扫common.js是用Hbuilder新建移动app hello html5+项目时生成的 扫描二维码页面test1.html Hello H5+ var ws = null, wo = null; var scan = null, domready = false; // H5 plus事件处理 function plusReady() { if(ws || !window.plus || !domready) { return; } // 获取窗口对象 ws = plus.webview.currentWebview(); wo = ws.opener(); // 开始扫描 ws.addEventListener('show', function() { var styles = { frameColor: "#65e102", scanbarColor: "#b7e871", background: "#000" }; //边框属性 var filter; //扫码格式 空为全类型，不能省略 scan = new plus.barcode.Barcode('bcid', filter, styles); scan.onmarked = onmarked; scan.start({ conserve: true, filename: '_doc/barcode/' }); }, false); // 显示页面并关闭等待框 ws.show('pop-in'); wo.evalJS('closeWaiting()'); } if(window.plus) { plusReady(); } else { document.addEventListener('plusready', plusReady, false); } // 监听DOMContentLoaded事件 document.addEventListener('DOMContentLoaded', function() { domready = true; plusReady(); }, false); // 二维码扫描成功 function onmarked(type, result, file) { switch(type) { case plus.barcode.QR: type = 'QR'; break; case plus.barcode.EAN13: type = 'EAN13'; break; case plus.barcode.EAN8: type = 'EAN8'; break; default: type = '其它' + type; break; } result = result.replace(/\n/g, ''); wo.evalJS("scaned('" + type + "','" + result + "','" + file + "');"); back(); } // 从相册中选择二维码图片 function scanPicture() { plus.gallery.pick(function(path) { plus.barcode.scan(path, onmarked, function(error) { plus.nativeUI.alert('无法识别此图片'); }); }, function(err) { console.log('Failed: ' + err.message); }); } #bcid { width: 100%; position: absolute; top: 0px; bottom: 44px; text-align: center; } .tip { color: #FFFFFF; font-weight: bold; text-shadow: 0px -1px #103E5C; } footer { width: 100%; height: 44px; position: absolute; bottom: 0px; line-height: 44px; text-align: center; color: #FFF; } .fbt { width: 50%; height: 100%; background-color: #FFCC33; float: left; } .fbt:active { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); }...载入中... 取 消 从相册选择二维码设置扫描框特定样式主要用到的代码，默认是红色的 var styles = { frameColor: "#65e102", scanbarColor: "#b7e871", background: "#000" }; //边框属性 var filter; //扫码格式 空为全类型，不能省略 scan = new plus.barcode.Barcode('bcid', filter, styles); (adsbygoogle = window.adsbygoogle || []).push({}); |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |